<script setup>
import { ref, onMounted } from 'vue'
import { queryAllDepts, addDept, getDeptById, editDept, deleteDept } from '../api/dept.js'
import { ElMessage, ElMessageBox } from 'element-plus'


const tableData = ref([])
const dialogTitle = ref('新增部门')
const dialogFormVisible = ref(false)
const form = ref({ name: '' })
const deptFormRef = ref(null)
//新增按钮-点击保存
function save() {
  // 校验输入框
  deptFormRef.value.validate(async (valid) => {
    if (!valid) {
      return;
    }
    let result;
    //修改部门，需要判断from.value里有没有id，有就是修改，没有就是新增   在js里，判断条件自动判断是否为空
    if (form.value.id) {
      result = await editDept(form.value)
    } else {
      result = await addDept(form.value)
    }
    //添加部门
    if (result.code == 1) {
      ElMessage.success('保存部门成功！') //弹窗提示信息
      dialogFormVisible.value = false; //隐藏dialog窗口
      // form.value = {}; //重置新增表单
      search();  //重新搜索
    } else {
      ElMessage.error('保存部门失败！')
    }
  })
}
// 新增按钮
function showAddWin() {
  dialogFormVisible.value = true; //显示新增窗口
  form.value = { name: '' }; //将窗口数据置为空
  dialogTitle.value = '新增部门';
}
const formRules = ref({
  name: [
    { required: true, message: '请输入名称', trigger: 'blur' },
    { min: 3, max: 20, message: '最少3个字,最多20个字', trigger: 'blur' },
  ]
});
//  表格数据，置为空

//↓↓↓↓↓ 查询部门列表 ↓↓↓↓↓
async function search() {
  //使用request发送请求，而不是原始的axios对象。得到的不是原始的response，而是被预处理后的响应正文result
  const result = await queryAllDepts();
  //从响应正文里取data，设置给数据tableData
  tableData.value = result.data;
}
// 表格
//↓↓↓↓↓钩子函数：页面一加载完成就立即发请求加载数据 ↓↓↓↓↓
onMounted(() => {
  search();
});

// 查询回显弹窗
const handleEdit = async (index, row) => {
  const result = await getDeptById(row.id);
  if (result.code == 1) {
    form.value = result.data;
    dialogFormVisible.value = true;
    dialogTitle.value = "修改部门";
  }

}

const handleDelete = (index, row) => {
  ElMessageBox.confirm(
    '是否永久的删除此部门？',
    '删除',
    {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    const result = await deleteDept(row.id);
    if (result.code == 1) {
      ElMessage.success("删除成功")
      search();
    }
  })

}


</script>

<template>
  <h4 class="xinz">部门管理</h4>
  <!-- // 新增按钮 -->
  <el-button type="primary" @click="showAddWin"
    style="margin-bottom: 20px;box-shadow: 0 8px 16px rgba(24, 25, 27, 0.15);">
    新增部门
  </el-button>
  <!-- // 新增窗口 -->
  <el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="500">
    <el-form :model="form" :rules="formRules" ref="deptFormRef">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </div>
    </template>
  </el-dialog>

  <!-- //表格 -->
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="id" label="序号" width="80" />
    <el-table-column prop="name" label="部门名称" />
    <el-table-column prop="updateTime" label="最后操作时间" />
    <el-table-column label="操作" width="180">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          编辑
        </el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped>
/* 文字样式 */
.xinz {
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 20px;
}
</style>
